<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* .list li:not(.red){background: pink} */
        #msg{width: 100px;height: 100px;}
        .border{border: solid 2px black}
        .red{background: red}
    </style>
</head>
<body>
    <div id="msg" class="border red">hello</div>
    <div id="cont">1</div>
    <div id="cont">2</div>
    <div id="cont">3</div>
    <p style="display:none">段落1</p>
    <p>段落2</p>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul class="list">
        <li>html</li>
        <li>javascript</li>
        <li>css</li>
        <li>php</li>
        <li></li>
        <li class="red">node</li>
        <li>mysql</li>
        <li>python</li>
    </ul>
    <div class="msg">
        <div class="xbox">
            <h2>二级标题1</h2>
            <h2>二级标题2</h2>
        </div>
        <h2>二级标题3</h2>
        <h2>二级标题4</h2>
    </div>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <div abc="hello">10</div>
    <div abc="hello" qwe>11</div>
    <div abc="hello" qwe="world">12</div>
    <div abc="hello" qwe="hahah">13</div>
    <div abc="hello" qwe="hahah" asd>14</div>
    <div abc="hello" qwe="hahah" asd>15</div>
</body>
<script src="./jquery.js"></script>
<script>
    
    // $("#cont").css("background","red")
    // $(".box").css("background","red")
    // $("span").css("background","red")
    // $("div[abc=hello]").css("background","red")
    // $("div[abc=hello][qwe]").css("background","red")
    // $("div[abc=hello][qwe=hahah]").css("background","red")
    // $("div[abc=hello][qwe=hahah][asd]").css("background","red")
    // $(".msg h2").css("background","red")
    // $(".msg>h2").css("background","red")
    // $(".msg+span").css("background","red")
    // $(".msg~span").css("background","red")
    // $(".msg,span").css("background","red")
    // $(".list li").css("background","red")

    // $(".list li:first").css("background","red")
    // $(".list li:last").css("background","red")
    // $(".list li:eq(2)").css("background","red")
    // $(".list li:even").css("background","red")
    // $(".list li:odd").css("background","red")
    // $(".list li:not(.red)").css("background","red")

    // $(".list li:contains(s)").css("background","red")
    // $(".list li:empty").css("background","red")

    // $(".list:has(.red)").css("border","solid 2px red")

    // $("p:hidden").css("border","solid 2px red")
    // $("p:visible").css("border","solid 2px red")

    // ========

    // 检测元素是否具有指定选择器

    // console.log($("#msg").is("#box"))
    // console.log($("#msg").is(".red"))
    
    // console.log($("#msg").hasClass("red"))

    // ========

    


</script>
</html>